<template>
  <div id="screenPage" ref="appRef">
    <div class="top-container">
      <div class="top-container-left">
        <span>{{ dateYear }}</span>
        <span>{{ dateDay }}</span>
        <span>{{ dateWeek }}</span>
        <span style="cursor: pointer" @click="goManerger"><i class="iconfont">&#xe6ff;</i>&nbsp;返回</span>
      </div>
      <div class="top-container-right" @click="drawerDetailHandleClick(10)">
        <span class="tips" />
        <Carousel class="carousel" />
      </div>
    </div>

    <div class="left-container">
      <div class="container-box">
        <div class="title"><span>企业排名</span> <span class="more" @click="drawerDetailHandleClick(0)">更多</span></div>
        <div class="content">
          <div class="QiYePaiMing-item">
            <span class="QiYePaiMing-item-img1" />
            <span>天津市环欧半导体材料技术有限公司（91.49）</span>
          </div>
          <div class="QiYePaiMing-item">
            <span class="QiYePaiMing-item-img2" />
            <span>艾迪斯鼎力科技（天津）有限公司（90.68）</span>
          </div>
          <div class="QiYePaiMing-item">
            <span class="QiYePaiMing-item-img3" />
            <span>天地伟业技术有限公司（89.53）</span>
          </div>
          <div class="QiYePaiMing-item">
            <span class="QiYePaiMing-item-img4" />
            <span>施耐德万高（天津）电气设备有限公司（89.08）</span>
          </div>
          <div class="QiYePaiMing-item">
            <span class="QiYePaiMing-item-img5" />
            <span>天驰天新机电技术配套（天津）有限公司（88.92）</span>
          </div>
        </div>
      </div>
      <div class="container-box">
        <div class="title"><span>现场隐患分类</span> <span class="more" @click="drawerDetailHandleClick(1)">更多</span></div>
        <div class="content">
          <Chart1 />
        </div>
      </div>
      <div class="container-box">
        <div class="title"><span>园区企业所在行业分布</span> <span class="more" @click="drawerDetailHandleClick(2)">更多</span></div>
        <div class="content">
          <Chart2 />
        </div>
      </div>
    </div>

    <div class="right-container">
      <div class="container-box">
        <div class="title"><span>企业综合评分排名</span> <span class="more" @click="drawerDetailHandleClick(3)">更多</span></div>
        <div class="content">
          <Chart3 />
        </div>
      </div>
      <div class="container-box">
        <div class="title"><span>企业安全管理评估风险排名TOP5</span> <span class="more" @click="drawerDetailHandleClick(4)">更多</span></div>
        <div class="content">
          <Chart4 />
        </div>
      </div>
      <div class="container-box">
        <div class="title"><span>企业现场风险评估排名TOP5</span> <span class="more" @click="drawerDetailHandleClick(5)">更多</span></div>
        <div class="content">
          <Chart5 />
        </div>
      </div>
    </div>

    <div class="bottom-container">
      <div class="bottom-container-1" @click="drawerHandleClick(6, '安全风险汇总')" />
      <div class="bottom-container-2" @click="drawerHandleClick(7, '企业危险源信息')" />
      <div class="bottom-container-3" @click="drawerHandleClick(8, '企业考核资料上报')" />
      <div class="bottom-container-4" @click="drawerHandleClick(9, '安全管理扣分项汇总')" />
    </div>

    <div id="container" />

    <!--弹出-->
    <el-drawer
      :visible.sync="drawerVisible"
      :modal="false"
    >
      <div class="dialog-page">
        <div class="dialog-page-title">{{ dialogTitle }}</div>
        <div class="dialog-page-chart">
          <Chart6 v-if="dialogChart === 6" />
          <Chart7 v-if="dialogChart === 7" />
          <Chart8 v-if="dialogChart === 8" />
          <Chart9 v-if="dialogChart === 9" />
        </div>
        <div class="dialog-page-btn"><el-button type="primary" @click="drawerDetailHandleClick(dialogChart)">更多信息</el-button></div>
      </div>
    </el-drawer>

    <el-drawer
      :visible.sync="drawerDetailVisible"
      :modal="false"
      class="detail-dialog"
      :size="windowWidth"
    >
      <div class="dialog-page-detail">
        <page0 v-if="dialogChart === 0" />
        <page1 v-if="dialogChart === 1" />
        <page2 v-if="dialogChart === 2" />
        <page3 v-if="dialogChart === 3" />
        <page4 v-if="dialogChart === 4" />
        <page5 v-if="dialogChart === 5" />
        <page6 v-if="dialogChart === 6" />
        <page7 v-if="dialogChart === 7" />
        <page8 v-if="dialogChart === 8" />
        <page9 v-if="dialogChart === 9" />
        <page10 v-if="dialogChart === 10" />
      </div>
    </el-drawer>
  </div>
</template>

<script>
import AMap from 'AMap'
import { formatTime } from '@/utils'
import Carousel from '@/components/Carousel'
import Chart1 from '@/components/DaPingEcharts/mod1/chart'
import Chart2 from '@/components/DaPingEcharts/mod2/chart'
import Chart3 from '@/components/DaPingEcharts/mod3/chart'
import Chart4 from '@/components/DaPingEcharts/mod4/chart'
import Chart5 from '@/components/DaPingEcharts/mod5/chart'
import Chart6 from '@/components/DaPingEcharts/mod6/chart'
import Chart7 from '@/components/DaPingEcharts/mod7/chart'
import Chart8 from '@/components/DaPingEcharts/mod8/chart'
import Chart9 from '@/components/DaPingEcharts/mod9/chart'

import page0 from '@/views/FengXianFenXi/QiYeFengXianZhiPaiMingBiao/index'
import page1 from '@/views/PingGuXianShi/XianChangGuanLiPingGu/index'
import page2 from '@/views/PingGuXianShi/QiYeKu/index'
import page3 from '@/views/PingGuXianShi/QiYeKu/index'
import page4 from '@/views/FengXianFenXi/AnQuanGuanLiFenZhiHuiZongBiao/index'
import page5 from '@/views/FengXianFenXi/XianChangFengXianZhiHuiZongBiao/index'
import page6 from '@/views/PingGuXianShi/AnQuanGuanLiPingGu/index'
import page7 from '@/views/FengXianPingGu/XianChangFengXianYuanJingYanKu/index'
import page8 from '@/views/FengXianPingGu/KaoHeRenYuanWeiHu/index'
import page9 from '@/views/FengXianPingGu/AnQuanGuanLiPingGu/index'
import page10 from '@/views/PingGuXianShi/ZhengJianDaoQi/index'

export default {
  components: { Carousel, Chart1, Chart2, Chart3, Chart4, Chart5, Chart6, Chart7, Chart8, Chart9, page0, page1, page2, page3, page4, page5, page6, page7, page8, page9, page10 },
  data() {
    return {
      map: null,
      marker: null,
      polyline: null,
      // 实时屏幕高度
      windowHeight: document.documentElement.clientHeight,
      windowWidth: ((document.documentElement.clientWidth) / 2).toString(),
      mapStyle: 'grey',
      scale: 0.5,
      timing: null,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
      drawerVisible: false,
      drawerDetailVisible: false,
      direction: 'right',
      dialogChart: 6,
      dialogTitle: '安全风险汇总'
    }
  },
  computed: {

  },
  mounted() {
    // 当浏览器被重置大小时执行
    const _this = this
    _this.scaleFun()
    window.onresize = () => {
      return (() => {
        _this.scaleFun()
      })()
    }
    this.initAMap()
    this.timeFn()
  },
  methods: {
    // 地图初始化方法
    /**
     * 高德地图Key (先用这个4056aa1b76794cdb8df1d5ee0000bdb8)
     * 引入是在index.html进行的同步加载，此项目直接使用的是原生高德，这样咱们自由化程度高
     * 高德API文档 https://lbs.amap.com/api/jsapi-v2/summary/
     * 示例控制台 https://lbs.amap.com/demo/jsapi-v2/example/map-lifecycle/map-show
     */
    initAMap() {
      this.map = new AMap.Map('container', {
        // 这里重新设置成项目的地点和缩放
        zoom: 11,
        center: [116.397428, 39.90923],
        terrain: true
      })
      // 使用CSS默认样式定义地图上的鼠标样式
      this.map.setDefaultCursor('pointer')
      const mapStyle = 'amap://styles/grey'
      this.map.setMapStyle(mapStyle)
    },
    // 响应式
    scaleFun() {
      if (this.$route.fullPath === '/DaPing') {
        // const x = 1800 / 1920 // 固定值
        // const y = 830 / 1080 // 固定值
        // const appRef = this.$refs['appRef']
        // appRef.style.transform = `scale(${x}, ${y}) translate(60px, 160px)`
        // appRef.style.webkitTransform = `scale(${x}, ${y}) translate(60px, 160px)` /* for Chrome || Safari */
        // appRef.style.msTransform = `scale(${x}, ${y}) translate(60px, 160px)` /* for Firefox */
        // appRef.style.mozTransform = `scale(${x}, ${y}) translate(60px, 160px)` /* for IE */
        // appRef.style.oTransform = `scale(${x}, ${y}) translate(60px, 160px)` /* for Opera */
      } else {
        const x = window.innerWidth / 1920 // 固定值
        const y = window.innerHeight / 1080 // 固定值
        const appRef = this.$refs['appRef']
        appRef.style.transform = `scale(${x}, ${y})`
        appRef.style.webkitTransform = `scale(${x}, ${y})` /* for Chrome || Safari */
        appRef.style.msTransform = `scale(${x}, ${y})` /* for Firefox */
        appRef.style.mozTransform = `scale(${x}, ${y})` /* for IE */
        appRef.style.oTransform = `scale(${x}, ${y})` /* for Opera */
      }
    },
    // 时间
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy年MM月dd日')
      }, 1000)
      this.dateWeek = this.weekday[new Date().getDay()]
    },
    drawerHandleClick(num, title) {
      this.drawerVisible = true
      this.dialogChart = num
      this.dialogTitle = title
    },
    drawerDetailHandleClick(num) {
      this.dialogChart = num
      this.drawerDetailVisible = true
    },
    goManerger() {
      this.$router.push('/FengXianFenXi/QiYeJianCeCang')
    }
  }
}
</script>

<style lang="scss" scoped>
#screenPage {
  margin: 0;
  padding: 0;
  width: 1920px; // 固定值
  height: 1080px; // 固定值
  transform-origin: 0 0 0; /*指定缩放的基本点*/
  -moz-transform-origin: 0 0 0;
  -ms-transform-origin: 0 0 0;
  -webkit-transform-origin: 0 0 0;
  -o-transform-origin: 0 0 0;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
#container {
  width: 100%;
  height: 100%;
}

.top-container {
  position: absolute;
  z-index: 9999;
  width: 1920px;
  height: 125px;
  background-image: url("~@/assets/DaPing/top-container-title.png");
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row;
  .top-container-left {
    margin-top: 26px;
    margin-left: 60px;
    color: #6984C1;
    span {
      margin-right: 10px;
    }
  }
  .top-container-right {
    margin-top: 26px;
    margin-right: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    span {
      display: inline-block;
    }
    .tips {
      background-image: url("~@/assets/DaPing/tips.png");
      background-size: cover;
      background-position: center center;
      width: 27px;
      height: 30px;
    }
    .carousel {
      width: 300px;
      height: 30px;
    }
  }
}

.left-container {
  position: absolute;
  top: 130px;
  left: 50px;
  height: 900px;
  z-index: 9999;
}

.right-container {
  position: absolute;
  top: 130px;
  right: 50px;
  width: 470px;
  height: 900px;
  z-index: 9999;
}

.bottom-container {
  position: absolute;
  top: 840px;
  left: 560px;
  width: 800px;
  height: 185px;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  div:hover {
    transition: transform 0.5s;
    transform: scale(1.1);
  }
  div {
    transition: all 0.5s ease-in-out;
  }
  .bottom-container-1 {
    background-image: url("~@/assets/DaPing/1.png");
    background-size: cover;
    background-position: center center;
    width: 185px;
    height: 201px;
    margin-right: 20px;
    cursor: pointer;
  }
  .bottom-container-2 {
    background-image: url("~@/assets/DaPing/2.png");
    background-size: cover;
    background-position: center center;
    width: 184px;
    height: 148px;
    margin-right: 20px;
    cursor: pointer;
  }
  .bottom-container-3 {
    background-image: url("~@/assets/DaPing/3.png");
    background-size: cover;
    background-position: center center;
    width: 184px;
    height: 148px;
    margin-right: 20px;
    cursor: pointer;
  }
  .bottom-container-4 {
    background-image: url("~@/assets/DaPing/4.png");
    background-size: cover;
    background-position: center center;
    width: 185px;
    height: 201px;
    cursor: pointer;
  }
}

.container-box {
  width: 470px;
  height: 290px;
  background-image: url("~@/assets/DaPing/container-box.png");
  background-size: cover;
  background-position: center center;
  margin-top: 10px;
  .title{
    width: 100%;
    height: 50px;
    display: flex;
    padding-left: 48px;
    padding-bottom: 10px;
    justify-content: space-between;
    align-items: flex-end;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;

  }
  .content {
    width: 100%;
    height: 240px;
    .QiYePaiMing-item {
      height: 24px;
      margin-left: 28px;
      margin-right: 10px;
      margin-top: 20px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: row;
      color: #697B9F;
      .QiYePaiMing-item-img1 {
        display: inline-block;
        background-image: url("~@/assets/DaPing/i1.png");
        background-size: cover;
        background-position: center center;
        width: 20px;
        height: 23px;
        margin-right: 10px;
      }
      .QiYePaiMing-item-img2 {
        display: inline-block;
        background-image: url("~@/assets/DaPing/i2.png");
        background-size: cover;
        background-position: center center;
        width: 20px;
        height: 23px;
        margin-right: 10px;
      }
      .QiYePaiMing-item-img3 {
        display: inline-block;
        background-image: url("~@/assets/DaPing/i3.png");
        background-size: cover;
        background-position: center center;
        width: 20px;
        height: 23px;
        margin-right: 10px;
      }
      .QiYePaiMing-item-img4 {
        display: inline-block;
        background-image: url("~@/assets/DaPing/i4.png");
        background-size: cover;
        background-position: center center;
        width: 20px;
        height: 23px;
        margin-right: 10px;
      }
      .QiYePaiMing-item-img5 {
        display: inline-block;
        background-image: url("~@/assets/DaPing/i5.png");
        background-size: cover;
        background-position: center center;
        width: 20px;
        height: 23px;
        margin-right: 10px;
      }
    }
  }
}

.dialog-page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  overflow-y: auto;
}
.dialog-page-title {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}
.more {
  font-size: 18px;
  font-weight: normal;
  color: #409EFF;
  margin-right: 20px;
  cursor: pointer;
}
</style>
